<template>
  <video
    ref="myElement"
    class="video-contianer"
    muted
    autoplay
    @click="huazhonghua"
  ></video>
</template>
<script setup name="videoFlv">
import flvjs from "flv.js"
const myElement = ref()
const props = defineProps({
  flvUrl: {
    default: "",
    type: String
  },
  width: "100%",
  height: "100%"
})
const url = ref("")
// 首先定义flvPlayer为null
const flvPlayer = ref(null)
const createVideo = async () => {
  var videoElement = myElement?.value || null
  if (flvjs.isSupported() && url.value && videoElement) {
    flvPlayer.value = flvjs.createPlayer(
      {
        type: "mp4",
        url: url.value, //你的url地址
        isLive: true,
        hasAudio: false,
        hasVideo: true, //数据源是否包含有视频
        enableStashBuffer: false //是否启用缓存区
      },
      {
        enableWorker: false, //不启用分离线程
        enableStashBuffer: false, //关闭IO隐藏缓冲区
        autoCleanupSourceBuffer: true //自动清除缓存
      }
    )
    flvPlayer.value?.attachMediaElement(videoElement)
    flvPlayer.value.load()

    // setTimeout(function () {
    //   flvPlayer.value.play();
    // }, 300);
    //处理视频播放错误的语法
    flvPlayer.value.on("error", () => {
      // message.error(`视频加载失败，请稍候重试！`);
      // alert(`视频加载失败，请稍候重试！`);
      return false
    })
  }
}

// 我的视频是弹窗显示的，所以创建了destroy方法，在子组件中暴露出去后，在父组件调用即可，这样关闭弹窗后，视频流会停止请求。
const setdestroy = () => {
  flvPlayer.value?.pause() //暂停播放数据流
  flvPlayer.value?.unload() //取消数据流加载
  flvPlayer.value?.detachMediaElement() //将播放实例从节点中取出
  flvPlayer.value?.destroy() //销毁播放实例
  flvPlayer.value = null
}
defineExpose({ setdestroy })
onMounted(() => {
  nextTick(() => {
    createVideo()
  })
})
watch(
  () => props.flvUrl,
  (val) => {
    url.value = val
    if (url.value) {
      // setdestroy();
      createVideo()
    }
  },
  {
    immediate: true,
    deep: true
  }
)
</script>
<style scoped lang="less">
.video-contianer {
  border-radius: 6px;
  // background-color: red;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
/* //音量的控制条 */
video::-webkit-media-controls-volume-slider {
  display: none !important;
}
/* // 进度条 */
video::-webkit-media-controls-timeline {
  display: none;
}
/* // 观看的当前时间 */
video::-webkit-media-controls-current-time-display {
  display: none;
}
/* //剩余时间 */
video::-webkit-media-controls-time-remaining-display {
  display: none;
}
/* //音量按钮 */
video::-webkit-media-controls-mute-button {
  display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}
/* // 播放 */
video::-webkit-media-controls-play-button {
  display: none;
}
/* // 进度条 */
video::-webkit-media-controls-timeline {
  display: none;
}
/* //全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
</style>
